﻿var quiz = {
    element: null,
    data: null,
    currentIndex: 0,
    arrayCeiling: 0,
    linkType: 0,
    linkValues: "Submit|Continue",
    init: function(element, data, linkType, linkValues) {
        this.element = element;
        this.data = data;
        this.arrayCeiling = this.data.length - 1;

        // Determine the linkType and linkValues
        if (linkType != null) {
            this.linkType = linkType;
            this.linkValues = linkValues;
        };

        // Randomize the starting question
        this.displayQuestion(Math.floor(Math.random() * this.data.length));
    },
    displayQuestion: function(index) {
        // if the element is null, display an alert and exit
        var control = this.element;
        if (!control) {
            alert("The quiz must be bound to an HTML element such as a class (ie: div.quiz) or an ID selector (ie: #quiz).");
            return;
        }

        // grab the indexed item
        var jsonData = this.data[index];

        // if the data object is out of range, display an alert and exit
        if (!jsonData) {
            alert("Cannot find the data source.");
            return;
        }

        // build the variables
        this.currentIndex = index;

        var question = jsonData.question;
        var choices = jsonData.choices;

        // build the html for the submit handler
        var linkProps = this.linkValues.split("|");

        // if the link is an image, show the image; otherwise, show the text
        if (this.linkType == 1) {
            var submitLink = $("<a>").attr("href", "#").click(this.showValueHandler).append($("<img>").attr("src", linkProps[1]).attr("alt", (linkProps[0]))); 
        } else {
            var submitLink = $("<a>").attr("href", "#").click(this.showValueHandler).text(linkProps[0]);
        }

        // build the html for the current question
        var answerControl = control + " .quizAnswers";
        $(control).html("<div class=\"quizQuestion\">" + question + "<\div>");
        $(control).append("<div class=\"quizAnswers\">");

        // enumerate multiple choice
        $.each(choices, function(answerCount) {
            var answer = this.split("|");
            var answerText = answer[0];
            var answerValue = answer[1];

            answerCount = answerCount + 1;
            answerLetter = answerCount + 96;
            answerLabel = "answer" + answerCount;

            $(answerControl).append($("<input>").attr("name", "quizAnswers").attr("type", "radio").attr("value", String.fromCharCode(answerLetter) + "|" + answerValue).attr("id", answerLabel));
            $(answerControl).append($("<label>").attr("for", answerLabel).text(" " + String.fromCharCode(answerLetter) + ". " + answerText));
            $(answerControl).append($("<br>"));
        });

        // add the submit link
        $(control).append($("<div>").attr("class","quizSubmitLink").append(submitLink));
    },
    nextQuestionHandler: function() {
        // if the current question is at the top of the array, then go to the next question; otherwise, show the next question in the sequence
        if (quiz.currentIndex == quiz.arrayCeiling) {
            quiz.displayQuestion(0);
        } else {
            quiz.displayQuestion(quiz.currentIndex + 1);
        };
    },
    showValueHandler: function() {
        // Obtain the checked value
        var control = quiz.element;
        var answer = $('[name=quizAnswers]:checked').val().split("|");
        var answerLetter = answer[0];
        var answerValue = answer[1];

        // build the html for the continue handler
        var linkProps = quiz.linkValues.split("|");

        // if the link is an image, show the image; otherwise, show the text
        if (quiz.linkType == 1) {
            var nextQuestionLink = $("<a>").attr("href", "#").click(quiz.nextQuestionHandler).append($("<img>").attr("src", linkProps[3]).attr("alt", (linkProps[2])));
        } else {
            var nextQuestionLink = $("<a>").attr("href", "#").click(quiz.nextQuestionHandler).text(linkProps[1]);
        }

        // Clear the control, then add the answer and the continue handler
        $(control).html("");
        $(control).append($("<div>").attr("class", "quizResult").text("You answered: \"" + answerLetter + "\" " + answerValue));
        $(control).append($("<div>").attr("class", "quizNextQuestionLink").append(nextQuestionLink));
    }
};